<template>
  <div class="process-container">
    <!-- 主步骤导航栏 -->
    <div class="steps-navigation">
      <div
        v-for="(step, index) in steps"
        :key="index"
        class="step-item"
        :class="{
          'step-active': currentStep === index + 1,
          'step-completed': currentStep > index + 1,
          'step-disabled': currentStep < index + 1,
        }"
      >
        <div class="step-icon">
          <span v-if="currentStep > index + 1">✓</span>
          <span v-else>{{ index + 1 }}</span>
        </div>
        <div class="step-title">{{ step.title }}</div>
      </div>
    </div>

    <!-- 步骤内容区域 -->
    <div class="steps-content">
      <!-- 第一步：老人及家属信息 -->
      <div v-if="currentStep === 1" class="step-panel">
        <h2>{{ steps[0].title }}</h2>

        <!-- 子步骤导航 -->
        <div class="substeps-nav">
          <div
            v-for="(substep, i) in firstStepSubsteps"
            :key="i"
            class="substep-item"
            :class="{
              'substep-active': firstStepCurrentSubstep === i + 1,
              'substep-completed': firstStepCurrentSubstep > i + 1,
              'substep-disabled': firstStepCurrentSubstep < i + 1,
            }"
          >
            <span>{{ i + 1 }}</span>
            <span>{{ substep.title }}</span>
          </div>
        </div>

        <!-- 子步骤1：基础信息 -->
        <div v-if="firstStepCurrentSubstep === 1" class="substep-content">
          <h3>老人基础信息</h3>
          <div class="form-grid">
            <div class="form-group">
              <label>姓名 <span class="required">*</span></label>
              <input
                type="text"
                v-model="formData.elder.name"
                placeholder="请输入老人姓名"
              />
            </div>
            <div class="form-group">
              <label>身份证号 <span class="required">*</span></label>
              <input
                type="text"
                v-model="formData.elder.idCard"
                placeholder="请输入18位身份证号"
              />
            </div>
            <div class="form-group">
              <label>性别</label>
              <div class="radio-group">
                <label>
                  <input
                    type="radio"
                    value="男"
                    v-model="formData.elder.gender"
                  />
                  男
                </label>
                <label>
                  <input
                    type="radio"
                    value="女"
                    v-model="formData.elder.gender"
                  />
                  女
                </label>
              </div>
            </div>
            <div class="form-group">
              <label>出生日期</label>
              <input type="date" v-model="formData.elder.birthDate" />
            </div>
            <div class="form-group">
              <label>年龄</label>
              <input
                type="number"
                v-model="formData.elder.age"
                min="0"
                placeholder="请输入年龄"
              />
            </div>
            <div class="form-group">
              <label>联系电话 <span class="required">*</span></label>
              <input
                type="tel"
                v-model="formData.elder.contact"
                placeholder="请输入联系电话"
              />
            </div>
            <div class="form-group">
              <label>家庭住址 <span class="required">*</span></label>
              <input
                type="text"
                v-model="formData.elder.address"
                placeholder="请输入家庭住址"
              />
            </div>
            <div class="form-group">
              <label>民族</label>
              <el-select
                v-model="formData.elder.ethnicity"
                placeholder="请选择民族"
                clearable
              >
                <el-option
                  v-for="dict in ethnicity"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>政治面貌</label>
              <el-select
                v-model="formData.elder.politicalStatus"
                placeholder="请选择政治面貌"
                clearable
              >
                <el-option
                  v-for="dict in political_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>宗教信仰</label>
              <el-select
                v-model="formData.elder.religiousBelief"
                placeholder="请选择宗教信仰"
                clearable
              >
                <el-option
                  v-for="dict in religious_belief"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>婚姻状况</label>
              <el-select
                v-model="formData.elder.maritalStatus"
                placeholder="请选择婚姻状况"
                clearable
              >
                <el-option
                  v-for="dict in marital_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>文化程度</label>
              <el-select
                v-model="formData.elder.education"
                placeholder="请选择文化程度"
                clearable
              >
                <el-option
                  v-for="dict in educational_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>经济来源</label>
              <el-select
                v-model="formData.elder.incomeSource"
                placeholder="请选择经济来源"
                clearable
              >
                <el-option
                  v-for="dict in source_of_income"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>爱好</label>
              <el-select
                v-model="formData.elder.hobby"
                placeholder="请选择爱好"
                clearable
              >
                <el-option
                  v-for="dict in hobby"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>医疗保障</label>
              <el-select
                v-model="formData.elder.medicalInsurance"
                placeholder="请选择医疗保障"
                clearable
              >
                <el-option
                  v-for="dict in medical_insurance"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </div>
            <div class="form-group">
              <label>医保卡号</label>
              <input
                type="text"
                v-model="formData.elder.medicalCardNo"
                placeholder="请输入医保卡号"
              />
            </div>
          </div>
          <div class="substep-actions">
            <button @click="nextFirstSubstep" :disabled="!isElderInfoValid">
              下一步
            </button>
          </div>
        </div>

        <!-- 子步骤2：家属信息 -->
        <div v-if="firstStepCurrentSubstep === 2" class="substep-content">
          <h3>家属信息</h3>
          <div class="family-members">
            <div
              v-for="(member, index) in formData.familyMembers"
              :key="index"
              class="family-member-card"
            >
              <div class="form-grid">
                <div class="form-group">
                  <label>家属姓名 <span class="required">*</span></label>
                  <input
                    type="text"
                    v-model="member.name"
                    placeholder="请输入家属姓名"
                  />
                </div>
                <div class="form-group">
                  <label>联系电话 <span class="required">*</span></label>
                  <input
                    type="tel"
                    v-model="member.phone"
                    placeholder="请输入联系电话"
                  />
                </div>
                <div class="form-group">
                  <label>与老人关系 <span class="required">*</span></label>
                  <el-select
                    v-model="member.relationship"
                    placeholder="请选择与老人关系"
                    clearable
                  >
                    <el-option
                      v-for="dict in relationship_with_the_elderly"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </div>
                <div class="form-group">
                  <label>紧急联系人</label>
                  <div class="radio-group">
                    <label>
                      <input
                        type="radio"
                        value="是"
                        v-model="member.isEmergency"
                      />
                      是
                    </label>
                    <label>
                      <input
                        type="radio"
                        value="否"
                        v-model="member.isEmergency"
                        checked
                      />
                      否
                    </label>
                  </div>
                </div>
              </div>
              <button
                type="button"
                class="remove-btn"
                @click="removeFamilyMember(index)"
                :disabled="formData.familyMembers.length <= 1"
              >
                - 删除
              </button>
            </div>
          </div>
          <button type="button" class="add-btn" @click="addFamilyMember">
            + 添加家属
          </button>

          <div class="substep-actions">
            <button @click="prevFirstSubstep">上一步</button>
            <button @click="nextFirstSubstep" :disabled="!isFamilyInfoValid">
              下一步
            </button>
          </div>
        </div>

        <!-- 子步骤3：资料上传（带预览功能） -->
        <div v-if="firstStepCurrentSubstep === 3" class="substep-content">
          <h3>资料上传</h3>
          <div class="upload-group">
            <!-- 一寸照片上传及预览 -->
            <div class="upload-item">
              <label>一寸照片 <span class="required">*</span></label>
              <div class="upload-wrapper">
                <div class="upload-area" @click="triggerFileInput('photo')">
                  <input
                    type="file"
                    accept="image/jpeg,image/png,image/jpg"
                    ref="photoInput"
                    @change="handleUpload('photo', $event)"
                    class="upload-input"
                    style="display: none"
                  />
                  <div v-if="!previewUrls.photo" class="upload-placeholder">
                    <span class="upload-icon">+</span>
                    <span class="upload-text">点击上传照片</span>
                  </div>
                  <div v-else class="preview-container">
                    <img
                      :src="previewUrls.photo"
                      alt="一寸照片预览"
                      class="preview-image"
                    />
                  </div>
                </div>
                <!-- 文件信息显示区域 -->
                <div v-if="formData.uploads.photo" class="file-info">
                  <span class="file-name">{{
                    formData.uploads.photo.name
                  }}</span>
                  <span class="file-size"
                    >({{ formatFileSize(formData.uploads.photo.size) }})</span
                  >
                  <button
                    type="button"
                    class="remove-btn"
                    @click.stop="clearUpload('photo')"
                  >
                    删除
                  </button>
                </div>
                <div v-else class="upload-hint">
                  支持JPG、PNG格式，文件大小不超过2MB
                </div>
              </div>
            </div>

            <!-- 身份证正面上传及预览 -->
            <div class="upload-item">
              <label>身份证正面 <span class="required">*</span></label>
              <div class="upload-wrapper">
                <div
                  class="upload-area"
                  @click="triggerFileInput('idCardFront')"
                >
                  <input
                    type="file"
                    accept="image/jpeg,image/png,image/jpg"
                    ref="idCardFrontInput"
                    @change="handleUpload('idCardFront', $event)"
                    class="upload-input"
                    style="display: none"
                  />
                  <div
                    v-if="!previewUrls.idCardFront"
                    class="upload-placeholder"
                  >
                    <span class="upload-icon">+</span>
                    <span class="upload-text">点击上传身份证正面</span>
                  </div>
                  <div v-else class="preview-container">
                    <img
                      :src="previewUrls.idCardFront"
                      alt="身份证正面预览"
                      class="preview-image"
                    />
                  </div>
                </div>
                <div v-if="formData.uploads.idCardFront" class="file-info">
                  <span class="file-name">{{
                    formData.uploads.idCardFront.name
                  }}</span>
                  <span class="file-size"
                    >({{
                      formatFileSize(formData.uploads.idCardFront.size)
                    }})</span
                  >
                  <button
                    type="button"
                    class="remove-btn"
                    @click.stop="clearUpload('idCardFront')"
                  >
                    删除
                  </button>
                </div>
                <div v-else class="upload-hint">
                  请上传清晰的身份证正面照片，支持JPG、PNG格式，文件大小不超过2MB
                </div>
              </div>
            </div>

            <!-- 身份证反面上传及预览 -->
            <div class="upload-item">
              <label>身份证反面 <span class="required">*</span></label>
              <div class="upload-wrapper">
                <div
                  class="upload-area"
                  @click="triggerFileInput('idCardBack')"
                >
                  <input
                    type="file"
                    accept="image/jpeg,image/png,image/jpg"
                    ref="idCardBackInput"
                    @change="handleUpload('idCardBack', $event)"
                    class="upload-input"
                    style="display: none"
                  />
                  <div
                    v-if="!previewUrls.idCardBack"
                    class="upload-placeholder"
                  >
                    <span class="upload-icon">+</span>
                    <span class="upload-text">点击上传身份证反面</span>
                  </div>
                  <div v-else class="preview-container">
                    <img
                      :src="previewUrls.idCardBack"
                      alt="身份证反面预览"
                      class="preview-image"
                    />
                  </div>
                </div>
                <div v-if="formData.uploads.idCardBack" class="file-info">
                  <span class="file-name">{{
                    formData.uploads.idCardBack.name
                  }}</span>
                  <span class="file-size"
                    >({{
                      formatFileSize(formData.uploads.idCardBack.size)
                    }})</span
                  >
                  <button
                    type="button"
                    class="remove-btn"
                    @click.stop="clearUpload('idCardBack')"
                  >
                    删除
                  </button>
                </div>
                <div v-else class="upload-hint">
                  请上传清晰的身份证反面照片，支持JPG、PNG格式，文件大小不超过2MB
                </div>
              </div>
            </div>
          </div>

          <div class="substep-actions">
            <button @click="prevFirstSubstep">上一步</button>
            <button @click="nextStep" :disabled="!isUploadInfoValid">
              完成第一步
            </button>
          </div>
        </div>
      </div>

      <!-- 第二步：评估流程 -->
      <div v-if="currentStep === 2" class="step-panel">
        <h2>{{ steps[1].title }}</h2>

        <!-- 第二步子步骤导航 -->
        <div class="substeps-nav">
          <div
            v-for="(substep, i) in secondStepSubsteps"
            :key="i"
            class="substep-item"
            :class="{
              'substep-active': secondStepCurrentSubstep === i + 1,
              'substep-completed': secondStepCurrentSubstep > i + 1,
              'substep-disabled': secondStepCurrentSubstep < i + 1,
            }"
          >
            <span>{{ i + 1 }}</span>
            <span>{{ substep.title }}</span>
          </div>
        </div>

        <!-- 子步骤1：健康评估 -->
        <div v-if="secondStepCurrentSubstep === 1" class="substep-content">
          <h3>健康评估</h3>

          <!-- 疾病情况（可多选） -->
          <div class="form-section">
            <label class="section-title"
              >疾病情况（可多选） <span class="required">*</span></label
            >
            <div class="tag-group">
              <label
                class="tag-item"
                v-for="(disease, idx) in diseaseOptions"
                :key="idx"
              >
                <input
                  type="checkbox"
                  v-model="formData.healthAssessment.diseases"
                  :value="disease"
                />
                {{ disease }}
              </label>
              <label class="tag-item">
                <input
                  type="checkbox"
                  v-model="formData.healthAssessment.diseases"
                  value="其他"
                  @change="toggleOtherDisease"
                />
                其他
              </label>
              <div
                v-if="formData.healthAssessment.showOtherDisease"
                class="other-input"
              >
                <input
                  type="text"
                  v-model="formData.healthAssessment.otherDisease"
                  placeholder="请输入其他疾病"
                  maxlength="20"
                />
              </div>
            </div>
          </div>

          <!-- 用药情况（可动态添加） -->
          <div class="form-section">
            <label class="section-title">用药情况</label>
            <div
              v-for="(medicine, mIdx) in formData.healthAssessment.medicines"
              :key="mIdx"
              class="medicine-item"
            >
              <div class="form-grid">
                <div class="form-group">
                  <label>药物名称</label>
                  <input
                    type="text"
                    v-model="medicine.name"
                    placeholder="请输入药物名称"
                    maxlength="20"
                  />
                </div>
                <div class="form-group">
                  <label>服药方法</label>
                  <input
                    type="text"
                    v-model="medicine.method"
                    placeholder="如：每日3次"
                    maxlength="20"
                  />
                </div>
                <div class="form-group">
                  <label>用药剂量</label>
                  <input
                    type="text"
                    v-model="medicine.dosage"
                    placeholder="如：1片/次"
                    maxlength="20"
                  />
                </div>
                <div class="form-group action-group">
                  <label>&nbsp;</label>
                  <button
                    type="button"
                    class="remove-btn"
                    @click="removeMedicine(mIdx)"
                    :disabled="formData.healthAssessment.medicines.length <= 1"
                  >
                    - 删除
                  </button>
                </div>
              </div>
            </div>
            <button type="button" class="add-btn" @click="addMedicine">
              + 添加用药
            </button>
          </div>

          <!-- 近30天风险事件 -->
          <div class="form-section">
            <label class="section-title"
              >近30天内风险事件 <span class="required">*</span></label
            >
            <div
              v-for="(event, eIdx) in riskEvents"
              :key="eIdx"
              class="risk-event-item"
            >
              <label>{{ event.name }}</label>
              <div class="radio-group">
                <label v-for="n in 4" :key="n">
                  <input
                    type="radio"
                    v-model="formData.healthAssessment.riskEvents[eIdx].count"
                    :value="n - 1"
                    required
                  />
                  {{ n - 1 }}次
                </label>
              </div>
            </div>
          </div>

          <!-- 身体健康情况 -->
          <div class="form-section">
            <label class="section-title"
              >身体健康情况 <span class="required">*</span></label
            >
            <div
              v-for="(condition, cIdx) in healthConditions"
              :key="cIdx"
              class="health-condition-item"
            >
              <label>{{ condition.name }}</label>
              <div class="tag-group">
                <label
                  class="tag-item"
                  v-for="(option, oIdx) in condition.options"
                  :key="oIdx"
                >
                  <input
                    type="checkbox"
                    v-model="
                      formData.healthAssessment.healthConditions[cIdx].selected
                    "
                    :value="option"
                  />
                  {{ option }}
                </label>
                <label class="tag-item">
                  <input
                    type="checkbox"
                    v-model="
                      formData.healthAssessment.healthConditions[cIdx].selected
                    "
                    value="其他"
                    @change="toggleOtherCondition(cIdx)"
                  />
                  其他
                </label>
                <div
                  v-if="
                    formData.healthAssessment.healthConditions[cIdx].showOther
                  "
                  class="other-input"
                >
                  <input
                    type="text"
                    v-model="
                      formData.healthAssessment.healthConditions[cIdx].otherText
                    "
                    placeholder="请补充说明"
                    maxlength="20"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 新增：其他情况说明 -->
          <div class="form-section">
            <label class="section-title">其他情况说明</label>
            <div class="form-group">
              <textarea
                v-model="formData.healthAssessment.otherConditions"
                placeholder="请输入其他需要说明的健康情况（选填）"
                rows="4"
                maxlength="500"
                class="other-textarea"
              ></textarea>
              <div class="char-count">
                {{ formData.healthAssessment.otherConditions?.length || 0 }}/500
              </div>
            </div>
          </div>

          <!-- 新增：体检报告上传 -->
          <div class="form-section">
            <label class="section-title">近期体检报告</label>
            <div class="upload-group">
              <div class="upload-item">
                <div class="upload-wrapper">
                  <div
                    class="upload-area medical-upload-area"
                    @click="triggerFileInput('medicalReport')"
                  >
                    <input
                      type="file"
                      accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                      ref="medicalReportInput"
                      @change="handleMedicalReportUpload($event)"
                      class="upload-input"
                      style="display: none"
                    />
                    <div
                      v-if="!formData.healthAssessment.medicalReport"
                      class="upload-placeholder"
                    >
                      <span class="upload-icon">📄</span>
                      <span class="upload-text">点击上传体检报告</span>
                      <span class="upload-subtext"
                        >支持PDF、Word、图片格式，文件大小不超过60MB</span
                      >
                    </div>
                    <div v-else class="file-info-large">
                      <div class="file-icon">📄</div>
                      <div class="file-details">
                        <span class="file-name">{{
                          formData.healthAssessment.medicalReport.name
                        }}</span>
                        <span class="file-size"
                          >({{
                            formatFileSize(
                              formData.healthAssessment.medicalReport.size
                            )
                          }})</span
                        >
                      </div>
                      <button
                        type="button"
                        class="remove-btn"
                        @click.stop="clearMedicalReport"
                      >
                        删除
                      </button>
                    </div>
                  </div>
                  <div class="upload-hint">
                    请上传近期的体检报告，支持PDF、Word、JPG、PNG格式，文件大小不超过60MB
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="substep-actions">
            <button @click="prevStep">上一步</button>
            <button
              @click="nextSecondSubstep"
              :disabled="!isHealthAssessmentValid"
            >
              下一步
            </button>
          </div>
        </div>

        <!-- 子步骤2：能力评估 -->
        <div v-if="secondStepCurrentSubstep === 2" class="substep-content">
          <h3>能力评估</h3>
          <div class="assessment-questions">
            <div
              v-for="(question, qIdx) in abilityQuestions"
              :key="qIdx"
              class="question-item"
            >
              <div class="question-title">
                <span class="question-number">{{ qIdx + 1 }}.</span>
                <span>{{ question.title }}</span>
              </div>
              <div class="radio-group">
                <label v-for="(option, oIdx) in question.options" :key="oIdx">
                  <input
                    type="radio"
                    v-model="formData.abilityAssessment.answers[qIdx]"
                    :value="option.score"
                    required
                  />
                  {{ option.label }}（{{ option.score }}分）
                </label>
              </div>
            </div>
          </div>

          <div class="substep-actions">
            <button @click="prevSecondSubstep">上一步</button>
            <button
              @click="nextSecondSubstep"
              :disabled="!isAbilityAssessmentValid"
            >
              下一步
            </button>
          </div>
        </div>

        <!-- 子步骤3：评估报告 -->
        <div v-if="secondStepCurrentSubstep === 3" class="substep-content">
          <h3>评估报告</h3>

          <!-- 能力评估结果 -->
          <div class="report-section">
            <h4>一、能力评估结果</h4>
            <div class="score-details">
              <div
                v-for="(question, qIdx) in abilityQuestions"
                :key="qIdx"
                class="score-item"
              >
                <span>{{ question.title }}</span>
                <span class="score-value"
                  >{{ formData.abilityAssessment.answers[qIdx] || 0 }}分</span
                >
              </div>
              <div class="total-score">
                <strong>总分：{{ totalAbilityScore }}分</strong>
                <span class="level-tag"
                  >能力初步等级：{{ getAbilityLevel(totalAbilityScore) }}</span
                >
              </div>
            </div>
          </div>

          <!-- 护理等级结果 -->
          <div class="report-section">
            <h4>二、护理等级结果</h4>
            <div class="form-group">
              <label
                >能力等级变更依据（可多选）
                <span class="required">*</span></label
              >
              <div class="tag-group">
                <label
                  class="tag-item"
                  v-for="(basis, bIdx) in levelChangeBasis"
                  :key="bIdx"
                >
                  <input
                    type="checkbox"
                    v-model="formData.assessmentReport.changeBasis"
                    :value="basis"
                  />
                  {{ basis }}
                </label>
                <label class="tag-item">
                  <input
                    type="checkbox"
                    v-model="formData.assessmentReport.changeBasis"
                    value="其他"
                    @change="toggleReportOtherBasis"
                  />
                  其他
                </label>
              </div>
              <div
                v-if="formData.assessmentReport.showOtherBasis"
                class="other-input"
              >
                <input
                  type="text"
                  v-model="formData.assessmentReport.otherBasis"
                  placeholder="请补充其他依据"
                />
              </div>
            </div>

            <div class="form-group">
              <label>能力最终等级 <span class="required">*</span></label>
              <div class="radio-group">
                <label v-for="(level, lIdx) in finalAbilityLevels" :key="lIdx">
                  <input
                    type="radio"
                    v-model="formData.assessmentReport.finalLevel"
                    :value="level"
                    required
                  />
                  {{ level }}
                </label>
              </div>
            </div>
          </div>

          <div class="substep-actions">
            <button @click="prevSecondSubstep">上一步</button>
            <button @click="nextStep" :disabled="!isReportValid">
              完成第二步
            </button>
          </div>
        </div>
      </div>

      <!-- 第三步：内容确认 -->
      <div v-if="currentStep === 3" class="step-panel">
        <h2>{{ steps[2].title }}</h2>
        
        <!-- 申请状态显示 -->
        <div class="approval-status-section">
          <div class="status-card">
            <div class="status-header">
              <h3>申请状态</h3>
              <div class="status-badge" :class="getStatusClass(approvalStatus)">
                {{ getStatusText(approvalStatus) }}
              </div>
            </div>
            <div class="status-details">
              <div class="detail-row">
                <span class="detail-label">申请人：</span>
                <span class="detail-value">{{ currentUser.name }}</span>
                <span class="detail-role">({{ currentUser.role }})</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">申请时间：</span>
                <span class="detail-value">{{ formatTime(applicationTime) }}</span>
              </div>
              <div v-if="approvalStatus === 'approved'" class="detail-row">
                <span class="detail-label">审批人：</span>
                <span class="detail-value">{{ approverInfo.name }}</span>
                <span class="detail-role">({{ approverInfo.role }})</span>
              </div>
              <div v-if="approvalStatus === 'approved'" class="detail-row">
                <span class="detail-label">审批时间：</span>
                <span class="detail-value">{{ formatTime(approvalTime) }}</span>
              </div>
              <div v-if="approvalStatus === 'rejected'" class="detail-row">
                <span class="detail-label">拒绝原因：</span>
                <span class="detail-value reject-reason">{{ rejectReason }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 审批人视图：显示详细信息 -->
        <div v-if="currentUser.role === '审批人'" class="review-content">
          <!-- 老人基本信息 -->
          <div class="review-section">
            <h3>一、老人基本信息</h3>
            <div class="info-grid">
              <div class="info-item">
                <label>姓名：</label>
                <span>{{ formData.elder.name }}</span>
              </div>
              <div class="info-item">
                <label>身份证号：</label>
                <span>{{ formData.elder.idCard }}</span>
              </div>
              <div class="info-item">
                <label>性别：</label>
                <span>{{ formData.elder.gender || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>年龄：</label>
                <span>{{ formData.elder.age || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>联系电话：</label>
                <span>{{ formData.elder.contact }}</span>
              </div>
              <div class="info-item">
                <label>家庭住址：</label>
                <span>{{ formData.elder.address }}</span>
              </div>
              <div class="info-item">
                <label>民族：</label>
                <span>{{ getDictLabel(ethnicity, formData.elder.ethnicity) || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>政治面貌：</label>
                <span>{{ getDictLabel(political_status, formData.elder.politicalStatus) || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>婚姻状况：</label>
                <span>{{ getDictLabel(marital_status, formData.elder.maritalStatus) || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>文化程度：</label>
                <span>{{ getDictLabel(educational_level, formData.elder.education) || '未填写' }}</span>
              </div>
            </div>
          </div>

          <!-- 家属信息 -->
          <div class="review-section">
            <h3>二、家属信息</h3>
            <div class="family-members-review">
              <div
                v-for="(member, index) in formData.familyMembers"
                :key="index"
                class="family-member-review"
              >
                <div class="member-header">
                  <span class="member-index">家属 {{ index + 1 }}</span>
                  <span
                    v-if="member.isEmergency === '是'"
                    class="emergency-tag"
                  >紧急联系人</span>
                </div>
                <div class="member-details">
                  <div class="detail-item">
                    <label>姓名：</label>
                    <span>{{ member.name }}</span>
                  </div>
                  <div class="detail-item">
                    <label>联系电话：</label>
                    <span>{{ member.phone }}</span>
                  </div>
                  <div class="detail-item">
                    <label>与老人关系：</label>
                    <span>{{ getDictLabel(relationship_with_the_elderly, member.relationship) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 健康状况 -->
          <div class="review-section">
            <h3>三、健康状况评估</h3>
            
            <!-- 疾病诊断 -->
            <div class="health-subsection">
              <h4>1. 疾病诊断</h4>
              <div class="disease-list">
                <span
                  v-for="(disease, index) in formData.healthAssessment.diseases"
                  :key="index"
                  class="disease-tag"
                >
                  {{ disease }}
                  <span
                    v-if="disease === '其他' && formData.healthAssessment.otherDisease"
                    class="other-detail"
                  >({{ formData.healthAssessment.otherDisease }})</span>
                </span>
                <span
                  v-if="formData.healthAssessment.diseases.length === 0"
                  class="no-data"
                >无疾病记录</span>
              </div>
            </div>

            <!-- 用药情况 -->
            <div class="health-subsection">
              <h4>2. 用药情况</h4>
              <div class="medicine-list">
                <div
                  v-for="(medicine, index) in formData.healthAssessment.medicines"
                  :key="index"
                  class="medicine-item-review"
                >
                  <div class="medicine-header">
                    <span class="medicine-name">{{ medicine.name || '未填写药物名称' }}</span>
                  </div>
                  <div class="medicine-details">
                    <span v-if="medicine.method">服药方法：{{ medicine.method }}</span>
                    <span v-if="medicine.dosage">用药剂量：{{ medicine.dosage }}</span>
                  </div>
                </div>
                <div
                  v-if="formData.healthAssessment.medicines.length === 0 || !formData.healthAssessment.medicines[0].name"
                  class="no-data"
                >无用药记录</div>
              </div>
            </div>

            <!-- 近30天风险事件 -->
            <div class="health-subsection">
              <h4>3. 近30天内风险事件</h4>
              <div class="risk-events-review">
                <div
                  v-for="(event, index) in riskEvents"
                  :key="index"
                  class="risk-event-review"
                >
                  <span class="event-name">{{ event.name }}：</span>
                  <span class="event-count">
                    {{ formData.healthAssessment.riskEvents[index]?.count ?? 0 }}次
                  </span>
                </div>
              </div>
            </div>

            <!-- 身体健康情况 -->
            <div class="health-subsection">
              <h4>4. 身体健康情况</h4>
              <div class="health-conditions-review">
                <div
                  v-for="(condition, index) in healthConditions"
                  :key="index"
                  class="health-condition-review"
                >
                  <div class="condition-name">{{ condition.name }}：</div>
                  <div class="condition-options">
                    <span
                      v-for="(option, optIndex) in formData.healthAssessment.healthConditions[index]?.selected || []"
                      :key="optIndex"
                      class="condition-tag"
                    >
                      {{ option }}
                      <span
                        v-if="option === '其他' && formData.healthAssessment.healthConditions[index]?.otherText"
                        class="other-detail"
                      >({{ formData.healthAssessment.healthConditions[index].otherText }})</span>
                    </span>
                    <span
                      v-if="!formData.healthAssessment.healthConditions[index]?.selected?.length"
                      class="no-data"
                    >无记录</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 其他情况说明 -->
            <div
              v-if="formData.healthAssessment.otherConditions"
              class="health-subsection"
            >
              <h4>5. 其他情况说明</h4>
              <div class="other-conditions">
                {{ formData.healthAssessment.otherConditions }}
              </div>
            </div>
          </div>

          <!-- 能力评估结果 -->
          <div class="review-section">
            <h3>四、能力评估结果</h3>
            <div class="ability-assessment-review">
              <!-- 各题目得分 -->
              <div class="ability-scores">
                <div
                  v-for="(question, index) in abilityQuestions"
                  :key="index"
                  class="ability-score-item"
                >
                  <span class="question-title">{{ question.title }}：</span>
                  <span class="question-score">
                    {{ formData.abilityAssessment.answers[index] || 0 }}分
                  </span>
                </div>
              </div>
              
              <!-- 总分和等级 -->
              <div class="ability-summary">
                <div class="total-score-review">
                  <strong>总分：{{ totalAbilityScore }}分</strong>
                </div>
                <div class="ability-level">
                  <span class="level-label">能力等级：</span>
                  <span class="level-value" :class="getLevelClass(totalAbilityScore)">
                    {{ getAbilityLevel(totalAbilityScore) }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 评估报告摘要 -->
          <div class="review-section">
            <h3>五、评估报告摘要</h3>
            <div class="report-summary-review">
              <div class="summary-item">
                <label>能力最终等级：</label>
                <span class="final-level">{{ formData.assessmentReport.finalLevel || '未评定' }}</span>
              </div>
              <div
                v-if="formData.assessmentReport.changeBasis.length > 0"
                class="summary-item"
              >
                <label>等级变更依据：</label>
                <div class="change-basis-list">
                  <span
                    v-for="(basis, index) in formData.assessmentReport.changeBasis"
                    :key="index"
                    class="basis-tag"
                  >
                    {{ basis }}
                    <span
                      v-if="basis === '其他' && formData.assessmentReport.otherBasis"
                      class="other-detail"
                    >({{ formData.assessmentReport.otherBasis }})</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 申请人视图：只显示状态 -->
        <div v-if="currentUser.role === '申请人'" class="applicant-view">
          <div class="applicant-message">
            <div class="message-icon">
              <span v-if="approvalStatus === 'pending'">⏳</span>
              <span v-else-if="approvalStatus === 'approved'">✅</span>
              <span v-else-if="approvalStatus === 'rejected'">❌</span>
            </div>
            <div class="message-content">
              <h4 v-if="approvalStatus === 'pending'">申请审核中</h4>
              <h4 v-else-if="approvalStatus === 'approved'">申请已通过</h4>
              <h4 v-else-if="approvalStatus === 'rejected'">申请未通过</h4>
              <p v-if="approvalStatus === 'pending'">
                您的入住申请已提交，正在等待审批人审核。请耐心等待...
              </p>
              <p v-else-if="approvalStatus === 'approved'">
                恭喜！您的入住申请已通过审批。下一步将进行入住配置。
              </p>
              <p v-else-if="approvalStatus === 'rejected'">
                很抱歉，您的入住申请未通过审批。原因：{{ rejectReason }}
              </p>
            </div>
          </div>
        </div>

        <!-- 审批操作按钮（仅审批人可见） -->
        <div v-if="currentUser.role === '审批人' && approvalStatus === 'pending'" class="approval-actions">
          <button class="reject-btn" @click="handleReject">拒绝申请</button>
          <button class="approve-btn" @click="handleApprove">批准申请</button>
        </div>

        <!-- 导航按钮 -->
        <div class="step-actions">
          <button @click="prevStep">上一步</button>
          <button 
            @click="nextStep" 
            :disabled="!isStepValid(3) || (currentUser.role === '审批人' && approvalStatus === 'pending')"
          >
            {{ getNextButtonText() }}
          </button>
        </div>
      </div>

      <!-- 第四步：参数配置 -->
      <div v-if="currentStep === 4" class="step-panel">
        <h2>{{ steps[3].title }}</h2>
        
        <!-- 上部分：入住设置 -->
        <div class="admission-config-section">
          <h3>入住设置</h3>
          <div class="form-grid">
            <!-- 入住期限 -->
            <div class="form-group">
              <label>入住期限 <span class="required">*</span></label>
              <div class="duration-group">
                <input
                  type="number"
                  v-model="formData.admissionConfig.duration"
                  min="1"
                  placeholder="请输入月数"
                  class="duration-input"
                />
                <span class="duration-unit">个月</span>
              </div>
            </div>

            <!-- 护理等级 -->
            <div class="form-group">
              <label>护理等级 <span class="required">*</span></label>
              <el-select
                v-model="formData.admissionConfig.levelId"
                placeholder="请选择护理等级"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in levelList"
                  :key="dict.id"
                  :label="dict.levelName"
                  :value="parseInt(dict.id)"
                ></el-option>
              </el-select>
            </div>

            <!-- 入住床位 -->
            <div class="form-group">
              <label>入住床位 <span class="required">*</span></label>
              <div class="bed-selection">
                <button 
                  type="button" 
                  class="bed-select-btn"
                  @click="showBedSelection = true"
                >
                  {{ formData.admissionConfig.selectedBed ? formData.admissionConfig.selectedBed.name : '选择床位' }}
                </button>
                <div v-if="formData.admissionConfig.selectedBed" class="bed-info">
                  <span class="bed-name">{{ formData.admissionConfig.selectedBed.name }}</span>
                  <span class="bed-type">{{ formData.admissionConfig.selectedBed.type }}</span>
                  <span class="bed-price">{{ formData.admissionConfig.selectedBed.price }}元/月</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 下部分：费用设置 -->
        <div class="fee-config-section">
          <h3>费用设置</h3>
          
          <!-- 费用提醒 -->
          <div class="fee-notice">
            <div class="notice-icon">💡</div>
            <div class="notice-content">
              <strong>费用说明：</strong>该费用为月账单，每月一号收取当月费用。请根据实际入住时间设置费用期限。
            </div>
          </div>

          <div class="form-grid">
            <!-- 费用期限 -->
            <div class="form-group">
              <label>开始时间 <span class="required">*</span></label>
              <el-date-picker
                v-model="formData.feeConfig.startDate"
                type="date"
                placeholder="选择开始日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </div>
            <div class="form-group">
              <label>结束时间 <span class="required">*</span></label>
              <el-date-picker
                v-model="formData.feeConfig.endDate"
                type="date"
                placeholder="选择结束日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </div>

            <!-- 押金 -->
            <div class="form-group">
              <label>押金（元）</label>
              <input
                type="number"
                v-model="formData.feeConfig.deposit"
                min="0"
                placeholder="请输入押金金额"
                @input="calculateTotalFee"
              />
            </div>

            <!-- 护理费用 -->
            <div class="form-group">
              <label>护理费用（元/月） <span class="required">*</span></label>
              <input
                type="number"
                v-model="formData.feeConfig.careFee"
                min="0"
                placeholder="请输入护理费用"
                @input="calculateTotalFee"
              />
              <span class="fee-unit"></span>
            </div>

            <!-- 床位费用 -->
            <div class="form-group">
              <label>床位费用（元/月） <span class="required">*</span></label>
              <input
                type="number"
                v-model="formData.feeConfig.bedFee"
                min="0"
                placeholder="请输入床位费用"
                @input="calculateTotalFee"
              />
              <span class="fee-unit"></span>
            </div>

            <!-- 其他费用 -->
            <div class="form-group">
              <label>其他费用（元/月）</label>
              <input
                type="number"
                v-model="formData.feeConfig.otherFee"
                min="0"
                placeholder="请输入其他费用"
                @input="calculateTotalFee"
              />
            </div>

            <!-- 医保支付 -->
            <div class="form-group">
              <label>医保支付（元/月）</label>
              <input
                type="number"
                v-model="formData.feeConfig.medicalInsurance"
                min="0"
                placeholder="请输入医保支付金额"
                @input="calculateTotalFee"
              />
            </div>

            <!-- 政府补贴 -->
            <div class="form-group">
              <label>政府补贴（元/月）</label>
              <input
                type="number"
                v-model="formData.feeConfig.governmentSubsidy"
                min="0"
                placeholder="请输入政府补贴金额"
                @input="calculateTotalFee"
              />
            </div>
          </div>

          <!-- 账单预览按钮 -->
          <div class="bill-preview-section">
            <button class="bill-preview-btn" @click="showBillPreview">
              📊 账单预览
            </button>
          </div>
        </div>

        <!-- 步骤导航 -->
        <div class="step-actions">
          <button @click="prevStep">上一步</button>
          <button @click="nextStep" :disabled="!isStepValid(4)">下一步</button>
        </div>
      </div>

      <!-- 第五步：最终提交 -->
      <div v-if="currentStep === 5" class="step-panel">
        <h2>{{ steps[4].title }}</h2>
        
        <div class="final-review">
          <div class="final-summary">
            <h3>签约信息</h3>
            
            <!-- 签约信息表单 -->
            <div class="contract-form">
              <div class="form-grid">
                <!-- 签约编号 -->
                <div class="form-group">
                  <label>签约编号 <span class="required">*</span></label>
                  <div class="contract-number-display">
                    <span class="contract-number">{{ formData.contractInfo.contractNumber }}</span>
                    <button type="button" class="refresh-btn" @click="generateContractNumber" title="重新生成">
                      🔄
                    </button>
                  </div>
                  <div class="field-hint">系统自动生成，可重新生成</div>
                </div>

                <!-- 合同名称 -->
                <div class="form-group">
                  <label>合同名称 <span class="required">*</span></label>
                  <input
                    type="text"
                    v-model="formData.contractInfo.contractName"
                    placeholder="请输入合同名称"
                    maxlength="100"
                  />
                </div>

                <!-- 合同期限 -->
                <div class="form-group">
                  <label>合同期限 <span class="required">*</span></label>
                  <div class="date-range-group">
                    <el-date-picker
                      v-model="formData.contractInfo.contractStartDate"
                      type="date"
                      placeholder="开始日期"
                      style="width: 48%"
                      value-format="YYYY-MM-DD"
                    />
                    <span class="date-separator">至</span>
                    <el-date-picker
                      v-model="formData.contractInfo.contractEndDate"
                      type="date"
                      placeholder="结束日期"
                      style="width: 48%"
                      value-format="YYYY-MM-DD"
                    />
                  </div>
                </div>

                <!-- 签约日期 -->
                <div class="form-group">
                  <label>签约日期 <span class="required">*</span></label>
                  <el-date-picker
                    v-model="formData.contractInfo.signDate"
                    type="date"
                    placeholder="选择签约日期"
                    style="width: 100%"
                    value-format="YYYY-MM-DD"
                  />
                </div>

                <!-- 丙方姓名 -->
                <div class="form-group">
                  <label>丙方姓名</label>
                  <input
                    type="text"
                    v-model="formData.contractInfo.partyCName"
                    placeholder="请输入丙方姓名"
                    maxlength="50"
                  />
                </div>

                <!-- 丙方联系方式 -->
                <div class="form-group">
                  <label>丙方联系方式</label>
                  <input
                    type="tel"
                    v-model="formData.contractInfo.partyCContact"
                    placeholder="请输入丙方联系方式"
                    maxlength="20"
                  />
                </div>
              </div>

              <!-- 合同上传 -->
              <div class="contract-upload-section">
                <h4>合同文件上传 <span class="required">*</span></h4>
                <div class="upload-group">
                  <div class="upload-item">
                    <div class="upload-wrapper">
                      <div
                        class="upload-area contract-upload-area"
                        @click="triggerFileInput('contractFile')"
                      >
                        <input
                          type="file"
                          accept=".pdf"
                          ref="contractFileInput"
                          @change="handleContractUpload($event)"
                          class="upload-input"
                          style="display: none"
                        />
                        <div
                          v-if="!formData.contractInfo.contractFile"
                          class="upload-placeholder"
                        >
                          <span class="upload-icon">📄</span>
                          <span class="upload-text">点击上传合同文件</span>
                          <span class="upload-subtext">仅支持PDF格式，文件大小不超过60MB</span>
                        </div>
                        <div v-else class="file-info-large">
                          <div class="file-icon">📄</div>
                          <div class="file-details">
                            <span class="file-name">{{ formData.contractInfo.contractFile.name }}</span>
                            <span class="file-size">({{ formatFileSize(formData.contractInfo.contractFile.size) }})</span>
                          </div>
                          <div class="file-actions">
                            <button
                              type="button"
                              class="preview-btn"
                              @click.stop="previewContract"
                              :disabled="!formData.contractInfo.contractFile"
                            >
                              预览
                            </button>
                            <button
                              type="button"
                              class="remove-btn"
                              @click.stop="clearContractFile"
                            >
                              删除
                            </button>
                          </div>
                        </div>
                      </div>
                      <div class="upload-hint">
                        请上传正式的合同文件，支持PDF格式，文件大小不超过60MB
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 签约信息预览 -->
              <div class="contract-preview-section">
                <h4>签约信息预览</h4>
                <div class="preview-card">
                  <div class="preview-grid">
                    <div class="preview-item">
                      <label>签约编号：</label>
                      <span class="preview-value contract-number-preview">{{ formData.contractInfo.contractNumber }}</span>
                    </div>
                    <div class="preview-item">
                      <label>合同名称：</label>
                      <span class="preview-value">{{ formData.contractInfo.contractName || '未填写' }}</span>
                    </div>
                    <div class="preview-item">
                      <label>合同期限：</label>
                      <span class="preview-value">
                        {{ formData.contractInfo.contractStartDate || '未选择' }} 至 {{ formData.contractInfo.contractEndDate || '未选择' }}
                      </span>
                    </div>
                    <div class="preview-item">
                      <label>签约日期：</label>
                      <span class="preview-value">{{ formData.contractInfo.signDate || '未选择' }}</span>
                    </div>
                    <div class="preview-item">
                      <label>丙方姓名：</label>
                      <span class="preview-value">{{ formData.contractInfo.partyCName || '未填写' }}</span>
                    </div>
                    <div class="preview-item">
                      <label>丙方联系方式：</label>
                      <span class="preview-value">{{ formData.contractInfo.partyCContact || '未填写' }}</span>
                    </div>
                    <div class="preview-item full-width">
                      <label>合同文件：</label>
                      <span class="preview-value">
                        {{ formData.contractInfo.contractFile ? formData.contractInfo.contractFile.name : '未上传' }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 最终确认 -->
              <div class="final-confirm">
                <label class="confirm-checkbox">
                  <input type="checkbox" v-model="isConfirmed" />
                  <span class="checkmark"></span>
                  我已仔细核对以上签约信息，确认信息准确无误，并同意提交入住申请及签约
                </label>
                <div class="confirm-hint" v-if="!isContractInfoValid">
                  <span class="hint-warning">⚠️ 请完善所有必填的签约信息</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="step-actions">
          <button @click="prevStep">上一步</button>
          <button 
            @click="completeProcess" 
            :disabled="!isConfirmed || !isContractInfoValid"
            class="submit-btn"
          >
            📝 完成签约并提交
          </button>
        </div>
      </div>

      <!-- 床位选择对话框 -->
      <div v-if="showBedSelection" class="dialog-overlay">
        <div class="bed-selection-dialog">
          <h3>选择床位</h3>
          <div class="dialog-content">
            <div class="bed-filter">
              <el-input
                v-model="bedSearchKey"
                placeholder="搜索床位编号或类型"
                clearable
                style="width: 200px; margin-right: 10px;"
              />
              <el-select
                v-model="bedFilterType"
                placeholder="床位类型"
                clearable
                style="width: 120px;"
              >
                <el-option label="单人间" value="single"></el-option>
                <el-option label="双人间" value="double"></el-option>
                <el-option label="多人间" value="shared"></el-option>
              </el-select>
            </div>
            
            <div class="bed-list">
              <div
                v-for="bed in filteredBeds"
                :key="bed.id"
                class="bed-item"
                :class="{ 'bed-selected': formData.admissionConfig.selectedBed?.id === bed.id }"
                @click="selectBed(bed)"
              >
                <div class="bed-header">
                  <span class="bed-name">{{ bed.name }}</span>
                  <span class="bed-status" :class="`status-${bed.status}`">
                    {{ bed.status === 'available' ? '空闲' : '已占用' }}
                  </span>
                </div>
                <div class="bed-details">
                  <span class="bed-type">{{ getBedTypeLabel(bed.type) }}</span>
                  <span class="bed-price">{{ bed.price }}元/月</span>
                </div>
                <div class="bed-location">
                  <span class="bed-room">{{ bed.room }}</span>
                  <span class="bed-floor">{{ bed.floor }}楼</span>
                </div>
              </div>
            </div>
            
            <div v-if="filteredBeds.length === 0" class="no-beds">
              暂无符合条件的床位
            </div>
          </div>
          <div class="dialog-actions">
            <button class="cancel-btn" @click="showBedSelection = false">取消</button>
            <button class="confirm-btn" @click="confirmBedSelection">确认选择</button>
          </div>
        </div>
      </div>

      <!-- 账单预览对话框 -->
      <div v-if="showBillPreviewDialog" class="dialog-overlay">
        <div class="bill-preview-dialog">
          <h3>费用账单预览</h3>
          <div class="dialog-content">
            <div class="bill-summary">
              <div class="bill-period">
                <strong>费用期限：</strong>
                {{ formData.feeConfig.startDate }} 至 {{ formData.feeConfig.endDate }}
                （共 {{ calculateMonths }} 个月）
              </div>
              
              <div class="bill-details">
                <h4>费用明细（月）</h4>
                <div class="bill-items">
                  <!-- 收入项 -->
                  <div class="bill-item income">
                    <span class="item-name">护理费用：</span>
                    <span class="item-amount">+{{ formData.feeConfig.careFee }}元</span>
                  </div>
                  <div class="bill-item income">
                    <span class="item-name">床位费用：</span>
                    <span class="item-amount">+{{ formData.feeConfig.bedFee }}元</span>
                  </div>
                  <div class="bill-item income" v-if="formData.feeConfig.otherFee > 0">
                    <span class="item-name">其他费用：</span>
                    <span class="item-amount">+{{ formData.feeConfig.otherFee }}元</span>
                  </div>
                  
                  <!-- 支出项 -->
                  <div class="bill-item expense" v-if="formData.feeConfig.medicalInsurance > 0">
                    <span class="item-name">医保支付：</span>
                    <span class="item-amount">-{{ formData.feeConfig.medicalInsurance }}元</span>
                  </div>
                  <div class="bill-item expense" v-if="formData.feeConfig.governmentSubsidy > 0">
                    <span class="item-name">政府补贴：</span>
                    <span class="item-amount">-{{ formData.feeConfig.governmentSubsidy }}元</span>
                  </div>
                </div>
                
                <div class="bill-total">
                  <div class="monthly-total">
                    <strong>月费用总计：</strong>
                    <span class="total-amount">{{ monthlyTotal }}元</span>
                  </div>
                  <div class="deposit-total" v-if="formData.feeConfig.deposit > 0">
                    <strong>押金：</strong>
                    <span class="deposit-amount">{{ formData.feeConfig.deposit }}元</span>
                  </div>
                  <div class="final-total">
                    <strong>首期应付款：</strong>
                    <span class="final-amount">{{ firstPaymentTotal }}元</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="dialog-actions">
            <button class="confirm-btn" @click="showBillPreviewDialog = false">确认</button>
          </div>
        </div>
      </div>

      <!-- 合同预览对话框 -->
      <div v-if="showContractPreview" class="dialog-overlay">
        <div class="contract-preview-dialog">
          <div class="dialog-header">
            <h3>合同文件预览</h3>
            <button class="close-btn" @click="showContractPreview = false">×</button>
          </div>
          <div class="dialog-content">
            <div class="pdf-preview" v-if="formData.contractInfo.contractFile">
              <div class="pdf-placeholder">
                <div class="pdf-icon">📄</div>
                <div class="pdf-info">
                  <h4>{{ formData.contractInfo.contractFile.name }}</h4>
                  <p>文件大小：{{ formatFileSize(formData.contractInfo.contractFile.size) }}</p>
                  <p>由于浏览器限制，请下载后查看完整内容</p>
                </div>
              </div>
              <div class="pdf-actions">
                <button class="download-btn" @click="downloadContract">
                  ⬇️ 下载合同
                </button>
                <button class="print-btn" @click="printContract">
                  🖨️ 打印合同
                </button>
              </div>
            </div>
            <div v-else class="no-file">
              暂无合同文件可预览
            </div>
          </div>
          <div class="dialog-actions">
            <button class="cancel-btn" @click="showContractPreview = false">关闭</button>
          </div>
        </div>
      </div>

      <!-- 拒绝原因对话框 -->
      <div v-if="showRejectDialog" class="dialog-overlay">
        <div class="reject-dialog">
          <h3>拒绝申请</h3>
          <div class="dialog-content">
            <label>请填写拒绝原因：</label>
            <textarea
              v-model="rejectReasonInput"
              placeholder="请输入拒绝申请的具体原因..."
              rows="4"
              maxlength="200"
            ></textarea>
            <div class="char-count">{{ rejectReasonInput.length }}/200</div>
          </div>
          <div class="dialog-actions">
            <button class="cancel-btn" @click="cancelReject">取消</button>
            <button class="confirm-reject-btn" @click="confirmReject" :disabled="!rejectReasonInput">
              确认拒绝
            </button>
          </div>
        </div>
      </div>

      <!-- 完成状态 -->
      <div v-if="isCompleted" class="complete-panel">
        <h2>流程已完成</h2>
        <p>所有步骤已顺利完成，感谢您的使用！</p>
        <button @click="resetProcess">重新开始</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, shallowRef, getCurrentInstance } from "vue";

// 护理等级列表
import { listLevel } from "@/api/level/level"
const levelList = ref([]);
const getLevelList = async () => {
  const res = await listLevel();
  console.log(res); 
  levelList.value = res.rows;
}


// 字典
const { proxy } = getCurrentInstance();
const { 
    ethnicity, 
    political_status, 
    marital_status, 
    religious_belief,
    educational_level,
    source_of_income,
    hobby,
    medical_insurance,
    relationship_with_the_elderly,
 } = proxy.useDict(
    "ethnicity", 
    "political_status", 
    "marital_status", 
    "religious_belief", 
    "educational_level", 
    "source_of_income", 
    "hobby",
    "medical_insurance",
    "relationship_with_the_elderly",
);

// 主步骤配置
const steps = ref([
  { title: "第一步：老人及家属信息" },
  { title: "第二步：评估流程" },
  { title: "第三步：内容确认" },
  { title: "第四步：参数配置" },
  { title: "第五步：完成签约办理" },
]);

// 第一步的子步骤配置
const firstStepSubsteps = ref([
  { title: "基础信息" },
  { title: "家属信息" },
  { title: "资料上传" },
]);

// 第二步子步骤配置
const secondStepSubsteps = ref([
  { title: "健康评估" },
  { title: "能力评估" },
  { title: "评估报告" },
]);

// 文件上传输入框的引用
const photoInput = ref(null);
const idCardFrontInput = ref(null);
const idCardBackInput = ref(null);
const medicalReportInput = ref(null);
const contractFileInput = ref(null);

// 流程状态管理
const currentStep = ref(1);
const firstStepCurrentSubstep = ref(1);
const secondStepCurrentSubstep = ref(1);
const isCompleted = ref(false);
const isConfirmed = ref(false);

// 第四步相关状态
const showBedSelection = ref(false);
const showBillPreviewDialog = ref(false);
const bedSearchKey = ref('');
const bedFilterType = ref('');

// 第五步相关状态
const showContractPreview = ref(false);

// 第三步相关状态和数据
const approvalStatus = ref('pending');
const currentUser = ref({
  name: '张三',
  role: '审批人'
});
const approverInfo = ref({
  name: '李四',
  role: '护理部主任'
});
const applicationTime = ref(new Date());
const approvalTime = ref(null);
const rejectReason = ref('');
const showRejectDialog = ref(false);
const rejectReasonInput = ref('');

// 用shallowRef存储预览URL
const previewUrls = shallowRef({
  photo: "",
  idCardFront: "",
  idCardBack: "",
});

// 模拟床位数据
const availableBeds = ref([
  { id: 1, name: 'A101-01', type: 'single', status: 'available', price: 1200, room: 'A101', floor: 1 },
  { id: 2, name: 'A101-02', type: 'single', status: 'available', price: 1200, room: 'A101', floor: 1 },
  { id: 3, name: 'B201-01', type: 'double', status: 'available', price: 800, room: 'B201', floor: 2 },
  { id: 4, name: 'B201-02', type: 'double', status: 'occupied', price: 800, room: 'B201', floor: 2 },
  { id: 5, name: 'C301-01', type: 'shared', status: 'available', price: 500, room: 'C301', floor: 3 },
  { id: 6, name: 'C301-02', type: 'shared', status: 'available', price: 500, room: 'C301', floor: 3 },
]);

// 评估选项配置
const diseaseOptions = [
  "无疾病",
  "冠心病",
  "高血压",
  "糖尿病",
  "心脏病",
  "脑血管病",
  "关节炎",
  "呼吸系统疾病",
];

const riskEvents = [
  { name: "跌倒" },
  { name: "走失" },
  { name: "噎食" },
  { name: "自杀" },
  { name: "昏迷" },
];

const healthConditions = [
  {
    name: "伤口情况",
    options: ["无", "擦伤", "烧烫伤", "术后伤口","糖尿病足溃疡"],
  },
  {
    name: "特殊医疗照护情况",
    options: ["无", "胃管", "尿管", "气管切开", "无创呼吸机", "透析"],
  },
  {
    name: "自理能力",
    options: ["不能自理", "轻度依赖", "中度依赖", "重度依赖"],
  },
  {
    name: "痴呆前兆",
    options: ["行为异常", "记忆障碍", "日常生活能力减退", "呆坐"],
  },
];

const abilityQuestions = [
  {
    title: "日常进食能力",
    options: [
      { label: "完全自理", score: 10 },
      { label: "部分协助", score: 5 },
      { label: "完全依赖", score: 0 },
    ],
  },
  {
    title: "穿衣洗漱能力",
    options: [
      { label: "完全自理", score: 10 },
      { label: "部分协助", score: 5 },
      { label: "完全依赖", score: 0 },
    ],
  },
  {
    title: "如厕及行走能力",
    options: [
      { label: "完全自理", score: 10 },
      { label: "部分协助", score: 5 },
      { label: "完全依赖", score: 0 },
    ],
  },
];

const levelChangeBasis = ["疾病进展", "能力退化", "家属要求", "评估调整"];

const finalAbilityLevels = [
  "一级（自主生活）",
  "二级（轻度依赖）",
  "三级（中度依赖）",
  "四级（重度依赖）",
  "五级（完全依赖）",
];

// 表单数据存储
const formData = ref({
  // 老人基础信息
  elder: {
    name: "",
    idCard: "",
    gender: "",
    birthDate: "",
    age: "",
    contact: "",
    address: "",
    ethnicity: "",
    politicalStatus: "",
    religiousBelief: "",
    maritalStatus: "",
    education: "",
    incomeSource: "",
    hobby: "",
    medicalInsurance: "",
    medicalCardNo: "",
  },
  // 家属信息（至少一条）
  familyMembers: [
    {
      name: "",
      phone: "",
      relationship: "",
      isEmergency: "否",
    },
  ],
  // 上传资料文件对象
  uploads: {
    photo: null,
    idCardFront: null,
    idCardBack: null,
  },

  // 第二步：健康评估数据
  healthAssessment: {
    diseases: [],
    showOtherDisease: false,
    otherDisease: "",
    medicines: [{ name: "", method: "", dosage: "" }],
    riskEvents: riskEvents.map(() => ({ count: null })),
    healthConditions: healthConditions.map((condition) => ({
      selected: [],
      showOther: false,
      otherText: "",
    })),
    otherConditions: "",
    medicalReport: null,
  },

  // 第二步：能力评估数据
  abilityAssessment: {
    answers: new Array(abilityQuestions.length).fill(null),
  },

  // 第二步：评估报告数据
  assessmentReport: {
    changeBasis: [],
    showOtherBasis: false,
    otherBasis: "",
    finalLevel: "",
  },

  // 第四步：入住配置
  admissionConfig: {
    duration: "",
    levelId: "",
    selectedBed: null
  },

  // 第四步：费用配置
  feeConfig: {
    startDate: "",
    endDate: "",
    deposit: 0,
    careFee: 0,
    bedFee: 0,
    otherFee: 0,
    medicalInsurance: 0,
    governmentSubsidy: 0
  },

  // 第五步：签约信息
  contractInfo: {
    contractNumber: "",
    contractName: "",
    contractStartDate: "",
    contractEndDate: "",
    signDate: "",
    partyCName: "",
    partyCContact: "",
    contractFile: null
  }
});

// 计算属性
const filteredBeds = computed(() => {
  return availableBeds.value.filter(bed => {
    const matchesSearch = !bedSearchKey.value || 
      bed.name.includes(bedSearchKey.value) || 
      getBedTypeLabel(bed.type).includes(bedSearchKey.value);
    const matchesType = !bedFilterType.value || bed.type === bedFilterType.value;
    const isAvailable = bed.status === 'available';
    
    return matchesSearch && matchesType && isAvailable;
  });
});

const monthlyTotal = computed(() => {
  const { careFee, bedFee, otherFee, medicalInsurance, governmentSubsidy } = formData.value.feeConfig;
  return (careFee || 0) + (bedFee || 0) + (otherFee || 0) - (medicalInsurance || 0) - (governmentSubsidy || 0);
});

const calculateMonths = computed(() => {
  const { startDate, endDate } = formData.value.feeConfig;
  if (!startDate || !endDate) return 0;
  
  const start = new Date(startDate);
  const end = new Date(endDate);
  const months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
  return Math.max(months, 1);
});

const firstPaymentTotal = computed(() => {
  return monthlyTotal.value + (formData.value.feeConfig.deposit || 0);
});

// 第一步子步骤验证逻辑
const isElderInfoValid = computed(() => {
  const e = formData.value.elder;
  return !!e.name && !!e.idCard && !!e.address && !!e.contact;
});

const isFamilyInfoValid = computed(() => {
  return formData.value.familyMembers.every(
    (member) => !!member.name && !!member.phone && !!member.relationship
  );
});

const isUploadInfoValid = computed(() => {
  const u = formData.value.uploads;
  return !!u.photo && !!u.idCardFront && !!u.idCardBack;
});

// 第二步子步骤验证逻辑
const isHealthAssessmentValid = computed(() => {
  const h = formData.value.healthAssessment;
  if (h.diseases.length === 0) return false;
  if (h.diseases.includes("其他") && !h.otherDisease) return false;
  if (h.riskEvents.some((e) => e.count === null)) return false;
  if (h.healthConditions.some((c) => c.selected.length === 0)) return false;
  return h.healthConditions.every((c, idx) => {
    if (c.selected.includes("其他")) {
      return !!c.otherText;
    }
    return true;
  });
});

const isAbilityAssessmentValid = computed(() => {
  return formData.value.abilityAssessment.answers.every(
    (score) => score !== null
  );
});

const isReportValid = computed(() => {
  const r = formData.value.assessmentReport;
  if (r.changeBasis.length === 0) return false;
  if (r.changeBasis.includes("其他") && !r.otherBasis) return false;
  return !!r.finalLevel;
});

// 第四步验证逻辑
const isAdmissionConfigValid = computed(() => {
  const config = formData.value.admissionConfig;
  return !!config.duration && !!config.levelId && !!config.selectedBed;
});

const isFeeConfigValid = computed(() => {
  const fee = formData.value.feeConfig;
  return !!fee.startDate && !!fee.endDate && fee.careFee !== '' && fee.bedFee !== '';
});

// 第五步验证逻辑
const isContractInfoValid = computed(() => {
  const contract = formData.value.contractInfo;
  return !!contract.contractNumber && 
         !!contract.contractName && 
         !!contract.contractStartDate && 
         !!contract.contractEndDate && 
         !!contract.signDate && 
         !!contract.contractFile;
});

// 主步骤验证
const isStepValid = (step) => {
  switch (step) {
    case 1:
      return firstStepCurrentSubstep.value === 3 && isUploadInfoValid.value;
    case 2:
      return secondStepCurrentSubstep.value === 3 && isReportValid.value;
    case 3:
      if (currentUser.value.role === '申请人') {
        return true;
      } else {
        return approvalStatus.value !== 'pending';
      }
    case 4:
      return isAdmissionConfigValid.value && isFeeConfigValid.value;
    case 5:
      return isConfirmed.value && isContractInfoValid.value;
    default:
      return false;
  }
};

// 能力评估总分计算
const totalAbilityScore = computed(() => {
  return formData.value.abilityAssessment.answers.reduce((sum, score) => {
    return sum + (score || 0);
  }, 0);
});

// 能力等级判定
const getAbilityLevel = (score) => {
  if (score >= 25) return "自主生活";
  if (score >= 15) return "轻度依赖";
  if (score >= 5) return "中度依赖";
  return "重度依赖";
};

// 文件上传相关方法
const triggerFileInput = (type) => {
  switch (type) {
    case "photo":
      photoInput.value?.click();
      break;
    case "idCardFront":
      idCardFrontInput.value?.click();
      break;
    case "idCardBack":
      idCardBackInput.value?.click();
      break;
    case "medicalReport":
      medicalReportInput.value?.click();
      break;
    case "contractFile":
      contractFileInput.value?.click();
      break;
  }
};

const handleUpload = async (type, e) => {
  const file = e.target.files[0];
  if (!file) return;

  const validTypes = ['image/jpeg', 'image/png', 'image/jpg'];
  if (!validTypes.includes(file.type)) {
    alert('请上传JPG或PNG格式的图片');
    resetFileInput(type);
    return;
  }

  const maxSize = 2 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('文件大小不能超过2MB');
    resetFileInput(type);
    return;
  }

  formData.value.uploads[type] = file;

  try {
    const originalPreviewUrl = URL.createObjectURL(file);
    previewUrls.value[type] = originalPreviewUrl;

    setTimeout(async () => {
      try {
        const compressedDataUrl = await compressImage(file);
        previewUrls.value[type] = compressedDataUrl;
        URL.revokeObjectURL(originalPreviewUrl);
      } catch (compressError) {
        console.error('图片压缩失败，使用原始图片:', compressError);
      }
    }, 100);
    
  } catch (error) {
    console.error('图片处理失败:', error);
    alert('图片处理失败，请重试');
    clearUpload(type);
  }
};

const handleMedicalReportUpload = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const validTypes = [
    'application/pdf',
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'image/jpeg',
    'image/png'
  ];
  
  const validExtensions = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png'];
  const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
  
  if (!validTypes.includes(file.type) && !validExtensions.includes(fileExtension)) {
    alert('请上传PDF、Word或图片格式的文件');
    resetFileInput('medicalReport');
    return;
  }

  // 更新为60MB限制
  const maxSize = 60 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('文件大小不能超过60MB');
    resetFileInput('medicalReport');
    return;
  }

  formData.value.healthAssessment.medicalReport = file;
};

const handleContractUpload = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  // 验证文件类型
  if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
    alert('请上传PDF格式的文件');
    resetFileInput('contractFile');
    return;
  }

  // 更新为60MB限制
  const maxSize = 60 * 1024 * 1024;
  if (file.size > maxSize) {
    alert('文件大小不能超过60MB');
    resetFileInput('contractFile');
    return;
  }

  // 保存文件对象
  formData.value.contractInfo.contractFile = file;
};

const compressImage = (file) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    img.onload = () => {
      let width = img.width;
      let height = img.height;
      
      const maxDimension = 600;
      if (width > maxDimension || height > maxDimension) {
        if (width > height) {
          height = (height * maxDimension) / width;
          width = maxDimension;
        } else {
          width = (width * maxDimension) / height;
          height = maxDimension;
        }
      }
      
      canvas.width = width;
      canvas.height = height;
      
      ctx.drawImage(img, 0, 0, width, height);
      const compressedDataUrl = canvas.toDataURL(file.type, 0.7);
      resolve(compressedDataUrl);
    };
    
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
};

const resetFileInput = (type) => {
  switch (type) {
    case "photo":
      if (photoInput.value) photoInput.value.value = "";
      break;
    case "idCardFront":
      if (idCardFrontInput.value) idCardFrontInput.value.value = "";
      break;
    case "idCardBack":
      if (idCardBackInput.value) idCardBackInput.value.value = "";
      break;
    case "medicalReport":
      if (medicalReportInput.value) medicalReportInput.value.value = "";
      break;
    case "contractFile":
      if (contractFileInput.value) contractFileInput.value.value = "";
      break;
  }
};

const clearUpload = (type) => {
  formData.value.uploads[type] = null;
  previewUrls.value[type] = "";
  resetFileInput(type);
};

const clearMedicalReport = () => {
  formData.value.healthAssessment.medicalReport = null;
  resetFileInput('medicalReport');
};

const clearContractFile = () => {
  formData.value.contractInfo.contractFile = null;
  resetFileInput('contractFile');
};

const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const sizes = ["Bytes", "KB", "MB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

// 第五步相关方法
const generateContractNumber = () => {
  const randomNum = Math.floor(1000000000 + Math.random() * 9000000000);
  formData.value.contractInfo.contractNumber = `HT${randomNum}`;
};

const previewContract = () => {
  if (!formData.value.contractInfo.contractFile) {
    alert('请先上传合同文件');
    return;
  }
  showContractPreview.value = true;
};

const downloadContract = () => {
  if (!formData.value.contractInfo.contractFile) return;
  
  const url = URL.createObjectURL(formData.value.contractInfo.contractFile);
  const a = document.createElement('a');
  a.href = url;
  a.download = formData.value.contractInfo.contractFile.name;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

const printContract = () => {
  if (!formData.value.contractInfo.contractFile) return;
  
  // 在实际应用中，这里可以调用打印API
  alert('打印功能需要集成专业的PDF打印库');
};

// 第四步相关方法
const getBedTypeLabel = (type) => {
  const typeMap = {
    single: '单人间',
    double: '双人间',
    shared: '多人间'
  };
  return typeMap[type] || type;
};

const selectBed = (bed) => {
  formData.value.admissionConfig.selectedBed = bed;
  formData.value.feeConfig.bedFee = bed.price;
  calculateTotalFee();
};

const confirmBedSelection = () => {
  showBedSelection.value = false;
};

const showBillPreview = () => {
  if (!isFeeConfigValid.value) {
    alert('请先完善费用设置信息');
    return;
  }
  showBillPreviewDialog.value = true;
};

const calculateTotalFee = () => {
  // 费用计算逻辑已经在计算属性中实现
};

// 第三步相关方法
const formatTime = (time) => {
  if (!time) return '-';
  return new Date(time).toLocaleString('zh-CN');
};

const getStatusClass = (status) => {
  const statusClasses = {
    pending: 'status-pending',
    approved: 'status-approved',
    rejected: 'status-rejected'
  };
  return statusClasses[status] || 'status-pending';
};

const getStatusText = (status) => {
  const statusTexts = {
    pending: '审核中',
    approved: '已通过',
    rejected: '未通过'
  };
  return statusTexts[status] || '未知状态';
};

const getDictLabel = (dict, value) => {
  if (!dict || !value) return '';
  const item = dict.find(item => item.value === value);
  return item ? item.label : '';
};

const getLevelClass = (score) => {
  if (score >= 25) return 'level-good';
  if (score >= 15) return 'level-fair';
  if (score >= 5) return 'level-poor';
  return 'level-bad';
};

const handleApprove = () => {
  approvalStatus.value = 'approved';
  approvalTime.value = new Date();
};

const handleReject = () => {
  showRejectDialog.value = true;
  rejectReasonInput.value = '';
};

const cancelReject = () => {
  showRejectDialog.value = false;
  rejectReasonInput.value = '';
};

const confirmReject = () => {
  if (rejectReasonInput.value.trim()) {
    approvalStatus.value = 'rejected';
    rejectReason.value = rejectReasonInput.value;
    approvalTime.value = new Date();
    showRejectDialog.value = false;
  }
};

const getNextButtonText = () => {
  if (currentUser.value.role === '审批人' && approvalStatus.value === 'pending') {
    return '等待审批完成';
  }
  return '下一步';
};

// 第一步子步骤导航
const nextFirstSubstep = () => {
  if (firstStepCurrentSubstep.value < firstStepSubsteps.value.length) {
    firstStepCurrentSubstep.value++;
  }
};

const prevFirstSubstep = () => {
  if (firstStepCurrentSubstep.value > 1) {
    firstStepCurrentSubstep.value--;
  }
};

// 家属信息操作
const addFamilyMember = () => {
  formData.value.familyMembers.push({
    name: "",
    phone: "",
    relationship: "",
    isEmergency: "否",
  });
};

const removeFamilyMember = (index) => {
  if (formData.value.familyMembers.length > 1) {
    formData.value.familyMembers.splice(index, 1);
  }
};

// 健康评估操作方法
const toggleOtherDisease = (e) => {
  formData.value.healthAssessment.showOtherDisease = e.target.checked;
  if (!e.target.checked) {
    formData.value.healthAssessment.otherDisease = "";
  }
};

const addMedicine = () => {
  formData.value.healthAssessment.medicines.push({
    name: "",
    method: "",
    dosage: "",
  });
};

const removeMedicine = (index) => {
  if (formData.value.healthAssessment.medicines.length > 1) {
    formData.value.healthAssessment.medicines.splice(index, 1);
  }
};

const toggleOtherCondition = (conditionIndex) => {
  const condition =
    formData.value.healthAssessment.healthConditions[conditionIndex];
  condition.showOther = condition.selected.includes("其他");
  if (!condition.showOther) {
    condition.otherText = "";
  }
};

// 评估报告操作方法
const toggleReportOtherBasis = (e) => {
  formData.value.assessmentReport.showOtherBasis = e.target.checked;
  if (!e.target.checked) {
    formData.value.assessmentReport.otherBasis = "";
  }
};

// 第二步子步骤导航
const nextSecondSubstep = () => {
  if (secondStepCurrentSubstep.value < secondStepSubsteps.value.length) {
    secondStepCurrentSubstep.value++;
  }
};

const prevSecondSubstep = () => {
  if (secondStepCurrentSubstep.value > 1) {
    secondStepCurrentSubstep.value--;
  }
};

// 主步骤导航
const nextStep = () => {
  if (currentStep.value < steps.value.length) {
    currentStep.value++;
  }
};

const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  } else {
    prevFirstSubstep();
  }
};

// 完成流程
const completeProcess = () => {
  if (!isContractInfoValid.value) {
    alert('请完善所有必填的签约信息');
    return;
  }
  
  isCompleted.value = true;
  console.log("所有数据", formData.value);
  
  // 模拟提交成功
  alert('签约办理完成！入住申请已成功提交。');
};

// 重置流程
const resetProcess = () => {
  currentStep.value = 1;
  firstStepCurrentSubstep.value = 1;
  secondStepCurrentSubstep.value = 1;
  isCompleted.value = false;
  isConfirmed.value = false;
  approvalStatus.value = 'pending';
  approvalTime.value = null;
  rejectReason.value = '';
  previewUrls.value = {
    photo: "",
    idCardFront: "",
    idCardBack: "",
  };
  
  // 重新生成签约编号
  generateContractNumber();
  
  formData.value = {
    elder: {
      name: "",
      idCard: "",
      gender: "",
      birthDate: "",
      age: "",
      contact: "",
      address: "",
      ethnicity: "",
      politicalStatus: "",
      religiousBelief: "",
      maritalStatus: "",
      education: "",
      incomeSource: "",
      hobby: "",
      medicalInsurance: "",
      medicalCardNo: "",
    },
    familyMembers: [
      {
        name: "",
        phone: "",
        relationship: "",
        isEmergency: "否",
      },
    ],
    uploads: {
      photo: null,
      idCardFront: null,
      idCardBack: null,
    },
    healthAssessment: {
      diseases: [],
      showOtherDisease: false,
      otherDisease: "",
      medicines: [{ name: "", method: "", dosage: "" }],
      riskEvents: riskEvents.map(() => ({ count: null })),
      healthConditions: healthConditions.map((condition) => ({
        selected: [],
        showOther: false,
        otherText: "",
      })),
      otherConditions: "",
      medicalReport: null,
    },
    abilityAssessment: {
      answers: new Array(abilityQuestions.length).fill(null),
    },
    assessmentReport: {
      changeBasis: [],
      showOtherBasis: false,
      otherBasis: "",
      finalLevel: "",
    },
    admissionConfig: {
      duration: "",
      careLevel: "",
      selectedBed: null
    },
    feeConfig: {
      startDate: "",
      endDate: "",
      deposit: 0,
      careFee: 0,
      bedFee: 0,
      otherFee: 0,
      medicalInsurance: 0,
      governmentSubsidy: 0
    },
    contractInfo: {
      contractNumber: "",
      contractName: "",
      contractStartDate: "",
      contractEndDate: "",
      signDate: "",
      partyCName: "",
      partyCContact: "",
      contractFile: null
    }
  };
  
  // 重新生成签约编号
  generateContractNumber();
};

// 初始化时生成签约编号
generateContractNumber();
getLevelList();
</script>

<style scoped>
/* 基础样式 */
.process-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* 主步骤导航样式 */
.steps-navigation {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 50px;
  position: relative;
}

.steps-navigation::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50px;
  right: 50px;
  height: 2px;
  background-color: #e5e7eb;
  z-index: 1;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.step-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #e5e7eb;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-title {
  font-size: 14px;
  color: #6b7280;
  transition: all 0.3s ease;
  text-align: center;
}

.step-active .step-icon {
  background-color: #3b82f6;
  color: white;
}

.step-active .step-title {
  color: #3b82f6;
  font-weight: 600;
}

.step-completed .step-icon {
  background-color: #10b981;
  color: white;
}

.step-completed .step-title {
  color: #10b981;
}

.step-disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* 步骤内容样式 */
.steps-content {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 30px;
  min-height: 300px;
}

.step-panel h2 {
  color: #1f2937;
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

/* 子步骤样式 */
.substeps-nav {
  display: flex;
  margin: 20px 0 30px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
}

.substep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 30px;
  color: #6b7280;
  cursor: pointer;
  font-weight: 500;
}

.substep-item span:first-child {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e5e7eb;
  color: #6b7280;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

.substep-active {
  color: #3b82f6;
}

.substep-active span:first-child {
  background-color: #3b82f6;
  color: white;
}

.substep-completed {
  color: #10b981;
}

.substep-completed span:first-child {
  background-color: #10b981;
  color: white;
}

.substep-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 表单样式 */
.substep-content {
  margin: 20px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 15px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #4b5563;
  font-weight: 500;
}

.required {
  color: #ef4444;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.other-textarea {
  resize: vertical;
  min-height: 80px;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 0;
}

/* 家属信息样式 */
.family-members {
  margin-bottom: 20px;
}

.family-member-card {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
}

.remove-btn {
  background-color: #fef2f2;
  color: #dc2626;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.add-btn {
  background-color: #eff6ff;
  color: #2563eb;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 30px;
}

/* 上传区域样式 */
.upload-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.upload-item {
  margin-bottom: 10px;
}

.upload-item label {
  display: block;
  margin-bottom: 12px;
  color: #4b5563;
  font-weight: 500;
}

.upload-wrapper {
  width: 280px;
}

.upload-area {
  width: 100%;
  height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #3b82f6;
  background-color: #f9fafb;
}

.medical-upload-area {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  text-align: center;
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  margin-bottom: 4px;
}

.upload-subtext {
  font-size: 12px;
  color: #6b7280;
}

.preview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.file-info {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.file-info-large {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
}

.file-icon {
  font-size: 24px;
}

.file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  color: #374151;
}

.file-size {
  font-size: 12px;
  color: #6b7280;
}

.upload-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}

/* 第二步评估相关样式 */
.form-section {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  display: block;
  margin-bottom: 15px;
  font-weight: 600;
  color: #333;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.tag-item input:checked + span {
  color: #3b82f6;
  font-weight: 500;
}

.medicine-item {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 15px;
}

.risk-event-item,
.health-condition-item {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.question-item {
  margin-bottom: 25px;
  padding: 15px;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.question-title {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.question-number {
  font-weight: bold;
  color: #3b82f6;
}

.report-section {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.score-details {
  margin-top: 10px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e0e0e0;
}

.total-score {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.level-tag {
  padding: 4px 10px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 14px;
}

.other-input {
  margin-top: 10px;
  margin-left: 5px;
}

.action-group {
  display: flex;
  align-items: flex-end;
}

/* 第三步特定样式 */
.approval-status-section {
  margin-bottom: 30px;
}

.status-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: #f9fafb;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.status-header h3 {
  margin: 0;
  color: #1f2937;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.status-pending {
  background: #fef3c7;
  color: #d97706;
}

.status-approved {
  background: #d1fae5;
  color: #065f46;
}

.status-rejected {
  background: #fee2e2;
  color: #dc2626;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  color: #6b7280;
  font-weight: 500;
}

.detail-value {
  color: #1f2937;
}

.detail-role {
  color: #9ca3af;
  font-size: 14px;
}

.reject-reason {
  color: #dc2626;
  font-weight: 500;
}

/* 审批内容样式 */
.review-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  background: white;
}

.review-section h3 {
  margin: 0 0 16px 0;
  color: #1f2937;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 8px;
}

.review-section h4 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 16px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.info-item span {
  color: #1f2937;
  font-size: 15px;
}

/* 家属信息样式 */
.family-members-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.family-member-review {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  background: #f9fafb;
}

.member-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.member-index {
  font-weight: 600;
  color: #374151;
}

.emergency-tag {
  background: #fee2e2;
  color: #dc2626;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.member-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.detail-item {
  display: flex;
  gap: 8px;
}

.detail-item label {
  color: #6b7280;
  font-weight: 500;
  min-width: 80px;
}

.detail-item span {
  color: #1f2937;
}

/* 健康状况样式 */
.health-subsection {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
}

.health-subsection:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.disease-list,
.medicine-list,
.risk-events-review,
.health-conditions-review {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.disease-tag,
.condition-tag,
.basis-tag {
  background: #eff6ff;
  color: #1e40af;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  border: 1px solid #dbeafe;
}

.other-detail {
  color: #6b7280;
  font-style: italic;
}

.no-data {
  color: #9ca3af;
  font-style: italic;
}

.medicine-item-review {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
  width: 100%;
}

.medicine-header {
  margin-bottom: 8px;
}

.medicine-name {
  font-weight: 600;
  color: #1e40af;
}

.medicine-details {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #6b7280;
}

.risk-event-review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  min-width: 200px;
}

.event-name {
  color: #374151;
  font-weight: 500;
}

.event-count {
  color: #dc2626;
  font-weight: 600;
}

.health-condition-review {
  margin-bottom: 12px;
}

.condition-name {
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.condition-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.other-conditions {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  color: #374151;
  line-height: 1.5;
}

/* 能力评估样式 */
.ability-assessment-review {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
}

.ability-scores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ability-score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.question-title {
  color: #374151;
}

.question-score {
  color: #1e40af;
  font-weight: 600;
}

.ability-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 2px solid #e5e7eb;
}

.total-score-review {
  font-size: 18px;
  color: #1f2937;
}

.ability-level {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-label {
  color: #6b7280;
}

.level-value {
  padding: 4px 12px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 14px;
}

.level-good {
  background: #d1fae5;
  color: #065f46;
}

.level-fair {
  background: #fef3c7;
  color: #d97706;
}

.level-poor {
  background: #fed7aa;
  color: #ea580c;
}

.level-bad {
  background: #fecaca;
  color: #dc2626;
}

/* 报告摘要样式 */
.report-summary-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.summary-item label {
  color: #374151;
  font-weight: 500;
  min-width: 120px;
}

.final-level {
  background: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-weight: 600;
}

.change-basis-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 申请人视图样式 */
.applicant-view {
  text-align: center;
  padding: 40px 20px;
}

.applicant-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.message-icon {
  font-size: 48px;
}

.message-content h4 {
  margin: 0 0 8px 0;
  color: #1f2937;
  font-size: 20px;
}

.message-content p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

/* 审批操作样式 */
.approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px 0;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.reject-btn {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.reject-btn:hover {
  background: #fee2e2;
}

.approve-btn {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.approve-btn:hover {
  background: #a7f3d0;
}

/* 第四步特定样式 */
.admission-config-section,
.fee-config-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
}

.admission-config-section h3,
.fee-config-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1f2937;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 10px;
}

/* 入住期限样式 */
.duration-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.duration-input {
  flex: 1;
}

.duration-unit {
  color: #6b7280;
  white-space: nowrap;
}

/* 床位选择样式 */
.bed-selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bed-select-btn {
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  color: #374151;
  cursor: pointer;
  text-align: left;
}

.bed-select-btn:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
}

.bed-info {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.bed-name {
  font-weight: 600;
  color: #1e40af;
}

.bed-type {
  color: #6b7280;
  font-size: 14px;
}

.bed-price {
  color: #059669;
  font-weight: 500;
}

/* 费用提醒样式 */
.fee-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  margin-bottom: 20px;
}

.notice-icon {
  font-size: 18px;
}

.notice-content {
  flex: 1;
  color: #1e40af;
  font-size: 14px;
}

/* 费用单位样式 */
.fee-unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  background: white;
  padding: 0 4px;
}

/* 账单预览按钮样式 */
.bill-preview-section {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.bill-preview-btn {
  background: #3b82f6;
  color: white;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.bill-preview-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* 第五步样式 */
.final-review {
  padding: 20px;
}

.final-summary h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1f2937;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 10px;
}

.contract-form {
  margin: 20px 0;
}

.contract-number-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.contract-number {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #1e40af;
  font-size: 16px;
  flex: 1;
}

.refresh-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.refresh-btn:hover {
  background: #e5e7eb;
}

.field-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.date-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #6b7280;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

/* 合同上传区域 */
.contract-upload-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.contract-upload-section h4 {
  margin: 0 0 16px 0;
  color: #374151;
}

.contract-upload-area {
  height: 140px;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.preview-btn {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #dbeafe;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.preview-btn:hover:not(:disabled) {
  background: #dbeafe;
}

.preview-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 签约信息预览 */
.contract-preview-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.contract-preview-section h4 {
  margin: 0 0 16px 0;
  color: #374151;
}

.preview-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 20px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.preview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-item.full-width {
  grid-column: 1 / -1;
}

.preview-item label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.preview-value {
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
}

.contract-number-preview {
  font-family: 'Courier New', monospace;
  color: #1e40af;
  background: #eff6ff;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* 最终确认区域 */
.final-confirm {
  margin-top: 30px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  line-height: 1.5;
}

.confirm-checkbox input {
  width: auto;
  margin-top: 2px;
}

.confirm-hint {
  margin-top: 12px;
}

.hint-warning {
  color: #dc2626;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 提交按钮 */
.submit-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 合同预览对话框 */
.contract-preview-dialog {
  background: white;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.dialog-header h3 {
  margin: 0;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.dialog-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.pdf-preview {
  text-align: center;
}

.pdf-placeholder {
  padding: 40px 20px;
  background: #f8fafc;
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
}

.pdf-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.pdf-info h4 {
  margin: 0 0 8px 0;
  color: #1f2937;
}

.pdf-info p {
  margin: 4px 0;
  color: #6b7280;
}

.pdf-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.download-btn,
.print-btn {
  padding: 10px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.download-btn:hover,
.print-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.no-file {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
  font-style: italic;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.bed-selection-dialog {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bill-preview-dialog {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
}

.reject-dialog {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dialog-content {
  margin-bottom: 20px;
}

.dialog-content label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 500;
}

.dialog-content textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-btn,
.confirm-reject-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-reject-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* 按钮区域样式 */
.substep-actions,
.step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button:not(:disabled):hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

button:nth-of-type(1) {
  background-color: #f3f4f6;
  color: #1f2937;
}

button:nth-of-type(2),
button:last-child {
  background-color: #3b82f6;
  color: white;
}

/* 完成面板样式 */
.complete-panel {
  text-align: center;
  padding: 50px 0;
}

.complete-panel h2 {
  color: #10b981;
  margin-bottom: 20px;
}

.complete-panel p {
  color: #4b5563;
  font-size: 16px;
  margin-bottom: 30px;
}

/* 床位选择对话框样式 */
.bed-filter {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.bed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  flex: 1;
}

.bed-item {
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.bed-item:hover {
  border-color: #93c5fd;
  background: #f0f7ff;
}

.bed-selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.bed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bed-name {
  font-weight: 600;
  color: #1f2937;
}

.bed-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.status-available {
  background: #d1fae5;
  color: #065f46;
}

.status-occupied {
  background: #fef3c7;
  color: #d97706;
}

.bed-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 14px;
}

.bed-type {
  color: #6b7280;
}

.bed-price {
  color: #059669;
  font-weight: 500;
}

.bed-location {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #9ca3af;
}

.no-beds {
  text-align: center;
  color: #9ca3af;
  padding: 40px;
  grid-column: 1 / -1;
}

/* 账单预览对话框样式 */
.bill-summary {
  padding: 16px;
  background: #f8fafc;
  border-radius: 6px;
}

.bill-period {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

.bill-details h4 {
  margin: 0 0 12px 0;
  color: #1f2937;
}

.bill-items {
  margin-bottom: 20px;
}

.bill-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.bill-item.income .item-amount {
  color: #059669;
  font-weight: 500;
}

.bill-item.expense .item-amount {
  color: #dc2626;
  font-weight: 500;
}

.bill-total {
  padding-top: 12px;
  border-top: 2px solid #e5e7eb;
}

.monthly-total,
.deposit-total,
.final-total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.final-total {
  border-top: 1px solid #e5e7eb;
  margin-top: 8px;
  padding-top: 12px;
}

.total-amount,
.final-amount {
  color: #dc2626;
  font-weight: 600;
  font-size: 18px;
}

.deposit-amount {
  color: #d97706;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }
  
  .date-range-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .date-range-group .el-date-picker {
    width: 100% !important;
  }
  
  .date-separator {
    min-width: auto;
  }
  
  .pdf-actions {
    flex-direction: column;
  }
  
  .contract-number-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .member-details {
    grid-template-columns: 1fr;
  }
  
  .ability-summary {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .approval-actions {
    flex-direction: column;
  }
  
  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .steps-navigation {
    flex-direction: column;
    gap: 20px;
  }
  
  .step-item {
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }
  
  .steps-navigation::before {
    display: none;
  }
  
  .bed-list {
    grid-template-columns: 1fr;
  }
  
  .bed-filter {
    flex-direction: column;
  }
  
  .bill-preview-dialog {
    margin: 20px;
    width: calc(100% - 40px);
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>